<script lang="ts" setup>
import { onMounted, onUnmounted, ref, getCurrentInstance } from "vue"
import useDraw from "@/utils/useDraw"
const { proxy }: any = getCurrentInstance()
// * 适配处理
const { calcRate, windowDraw, unWindowDraw } = useDraw()
const gauge = ref(null)

/**绘制仪表盘 */

const myChartCross = ref<any>()
const crossOption = ref<any>()
const renderChartCross = () => {
  if (myChartCross.value == null) {
    const myDom = gauge.value
    myChartCross.value = proxy.$echarts.init(myDom)
  }

  crossOption.value = {
    series: [
      //左侧仪表盘
      {
        name: "gauge 1",
        type: "gauge",
        min: 0,
        max: 150,
        startAngle: 230,
        endAngle: -310,
        splitNumber: 5,
        radius: "35%",
        center: ["21%", "55%"],
        axisLine: {
          lineStyle: {
            color: [[1, "#34FFCA"]],
            width: 12
          }
        },
        splitLine: {
          distance: -7,
          length: 16,
          lineStyle: {
            color: "#409eff",
            width: 1
          }
        },
        axisLabel: {
          distance: 2,
          fontSize: 10,
          fontWeight: 400,
          fontFamily: "Arial",
          color: "#000"
        },
        anchor: {},
        pointer: {
          width: 5,
          length: "60%",
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(0,234,223,0.9)" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(0,234,223,0.3)" // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        },
        detail: {
          show: false
        },
        data: [
          {
            value: 20
          }
        ],
        animationEasing: "linear",
        animationEasingUpdate: "quadraticIn", //数据更新时的缓动效果
        animationDurationUpdate: 1000, //数据更新动画的时长
        animation: true //开启动画
      },
      //中间的仪表盘
      {
        name: "gauge 2",
        type: "gauge",
        min: 0,
        max: 180,
        z: 10,
        startAngle: 210,
        endAngle: -30,
        splitNumber: 9,
        radius: "50%",
        center: ["50%", "50%"],
        axisLine: {
          show: false,
          lineStyle: {
            width: 2,
            color: [[0.825, "#fff"]]
          }
        },
        splitLine: {
          distance: 35,
          length: 22,
          lineStyle: {
            color: "#409eff",
            width: 1
          }
        },
        axisLabel: {
          distance: 3,
          fontSize: 12,
          fontWeight: 400,
          fontFamily: "Arial",
          color: "#000"
        },
        anchor: {},
        pointer: {
          width: 6,
          offsetCenter: [0, "-10%"],
          length: "75%",
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(0,234,223,0.9)" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(0,234,223,0.3)" // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        },
        data: [
          {
            value: 130
            // name: '1/min x 1000'
          }
        ],
        detail: {
          show: false
        },
        animationEasing: "linear",
        animationEasingUpdate: "quadraticIn", //数据更新时的缓动效果
        animationDurationUpdate: 1000, //数据更新动画的时长
        animation: true //开启动画
      },
      {
        name: "gauge 3",
        type: "gauge",
        min: 0,
        max: 8,
        z: 10,
        splitNumber: 8,
        radius: "50%",
        axisLine: {
          lineStyle: {
            width: 12,
            color: [[1, "#34FFCA"]]
          }
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        anchor: {},
        pointer: {
          show: false
        },
        title: {
          show: false
        },
        detail: {
          show: false,
          offsetCenter: ["0", "70%"],
          color: "#FFF",
          fontSize: 18,
          formatter: "{value}.00"
        },
        // value is speed
        data: [
          {
            value: 130
          }
        ],
        animationEasing: "linear",
        animationEasingUpdate: "quadraticIn", //数据更新时的缓动效果
        animationDurationUpdate: 1000, //数据更新动画的时长
        animation: true //开启动画
      },
      //右侧的仪表盘
      {
        name: "gauge 4",
        type: "gauge",
        min: 0,
        max: 8,
        startAngle: 135,
        endAngle: -50,
        radius: "37%",
        center: ["79%", "55%"],
        //右侧表盘颜色
        axisLine: {
          lineStyle: {
            color: [[1, "#34FFCA"]],
            width: 12
          }
        },
        detail: {
          show: false
        },
        splitLine: {
          show: false,
          length: 6
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        anchor: {},
        pointer: {
          show: true,
          width: 5,
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(0,234,223,0.9)" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(0,234,223,0.3)" // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        },
        data: [
          {
            value: 6,
            name: ""
          }
        ],
        animationEasing: "linear",
        animationEasingUpdate: "quadraticIn", //数据更新时的缓动效果
        animationDurationUpdate: 1000, //数据更新动画的时长
        animation: true //开启动画
      },
      {
        name: "gauge 5",
        type: "gauge",
        min: 0,
        max: 8,
        splitNumber: 4,
        startAngle: 132,
        endAngle: -45,
        radius: "30%",
        center: ["79%", "55.3%"],
        axisLine: {
          lineStyle: {
            width: 0,
            color: [
              [0.15, "#f00"],
              [1, "rgba(255, 0, 0, 0)"]
            ]
          }
        },
        axisLabel: {
          distance: 1,
          fontSize: 10,
          fontWeight: 400,
          fontFamily: "Arial",
          color: "#000"
        },
        splitLine: {
          distance: 35,
          length: 12,
          lineStyle: {
            color: "#409eff",
            width: 1
          }
        },
        animationEasing: "linear",
        animationEasingUpdate: "quadraticIn", //数据更新时的缓动效果
        animationDurationUpdate: 1000, //数据更新动画的时长
        animation: true //开启动画
      }
    ]
  }
  console.log((Math.random() * 150).toFixed(2))
  setInterval(() => {
    crossOption.value.series[0].data[0].value = (Math.random() * 150).toFixed(2) //表盘1
    crossOption.value.series[1].data[0].value = (Math.random() * 180).toFixed(2) //表盘2
    crossOption.value.series[3].data[0].value = (Math.random() * 8).toFixed(2) //表盘3
    myChartCross.value.setOption(crossOption.value, true) //每次刷新后重新显示图表
  }, 500)
  // myChartCross.value.setOption(crossOption.value)
}

// 生命周期
onMounted(() => {
  windowDraw()
  calcRate()
  // console.log(bar.value)
  renderChartCross()
})

onUnmounted(() => {
  unWindowDraw()
})
</script>
<template>
  <div style="width: 500px; height: 500px">
    <!--仪表盘-->
    <div ref="gauge" id="gauge" />
  </div>
</template>
<style lang="scss" scoped>
#gauge {
  width: 500px;
  height: 100%;
}
</style>
